<template>
  <div id="app">
    <!-- 路由匹配到的组件将渲染在这里 -->
    <el-container>
      <el-header>
        <el-header class="header">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item @click="navigateTo('/')" index="1">主页</el-menu-item>
            <el-menu-item index="2">
              <el-button
                type="primary"
                @click="
                  navigateToExternal(
                    'https://github.com/kubesre/docker-registry-mirrors/issues/new?assignees=&labels=sync+image&projects=&template=sync-image.yml'
                  )
                "
                >添加镜像</el-button
              ></el-menu-item
            >
            <el-menu-item
              @click="
                navigateToExternal(
                  'https://github.com/kubesre/docker-registry-mirrors'
                )
              "
              index="3"
              >Github</el-menu-item
            >
            <el-menu-item
              @click="
                navigateToExternal(
                  'https://github.com/kubesre/docker-registry-mirrors#支持这个项目'
                )
              "
              index="4"
              >赞助</el-menu-item
            >
            <el-menu-item
              @click="
                navigateToExternal(
                  'https://www.kubesre.com/'
                )
              "
              index="4"
              >云原生社区</el-menu-item
            >
          </el-menu>
          <div class="line"></div>
          <div class="search-bar">
            <el-form :model="searchForm" :rules="rules" ref="searchForm">
              <el-form-item prop="search">
                <el-input
                  placeholder="镜像名称 nginx 支持模糊搜索"
                  v-model="searchForm.search"
                  class="search-input"
                  @keyup.enter="validateSearch"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="validateSearch"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-header>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer class="footer">
        <div class="wechat-section">
          <!-- <p>站长微信：</p> -->
          <img
            src="@/static/wechat.png"
            alt="站长微信二维码"
            class="wechat-qrcode"
          />
        </div>
        <p>版权所有 © 2024 云原生运维圈</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        search: ''
      },
      rules: {
        search: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }]
      }
    }
  },
  methods: {
    navigateTo(path) {
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    },
    navigateToExternal(url) {
      window.open(url, '_blank')
    },
    validateSearch(event) {
      console.log('xxx', event)
      if (event) {
        event.preventDefault() // 阻止默认的回车行为
      }
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.Search(this.searchForm.search)
        } else {
          console.log('搜索验证失败')
          return false
        }
      })
    },
    Search(search) {
      if (this.$route.path !== `/search/${search}`) {
        this.$router.push({ path: `/search/${search}` })
      } else {
        console.log('已经在目标路由上。')
      }
    },
    handleSearch() {
      console.log('Searching for:', this.search)
      // 实现搜索逻辑
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px; /* 根据需要调整高度 */
  line-height: 60px;
  background-color: #ffffff;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-main {
  min-height: calc(100vh - 116px); /* 100vh 减去 header 和 footer 的高度 */
  padding: 20px;
  box-sizing: border-box;
}
.search-bar .el-form {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.footer {
  /* display: flex;
  justify-content: center; */
  text-align: center;
  /* padding: 20px; */
  background-color: #f8f8f8;
}

.footer p {
  margin: 5px 0;
}

.wechat-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wechat-qrcode {
  width: 150px; /* 调整为你需要的大小 */
  height: 150px;
  margin-top: 10px;
}
</style>
